<template>
    <div class="m-container">

        <div class="m-content">
            <el-form ref="editForm" status-icon :model="editForm" :rules="rules" label-width="80px">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="editForm.title"></el-input>
                </el-form-item>
                <el-form-item label="作者" prop="author">
                    <el-input v-model="editForm.author"></el-input>
                </el-form-item>
                <el-form-item label="标签" prop="tag">
                    <el-select v-model="editForm.tag" placeholder="请选择标签" multiple
                               clearable :style="{ width: '270px' }">
                        <el-option v-for="dict in tagOptions"
                                   :key="dict.id"
                                   :label="dict.aritagcontent"
                                   :value="dict.aritagcontent"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="分类" prop="title">
                    <el-select v-model="editForm.type" placeholder="请选择分类">
                        <el-option v-for="dict in typeOptions"
                                   :key="dict.id"
                                   :label="dict.aritypecontent"
                                   :value="dict.aritypecontent"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="是否转载">
                    <el-radio-group v-model="editForm.isreprint">
                        <el-radio label="1" value="是">是</el-radio>
                        <el-radio label="0" value="否">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="摘要" prop="description">
                    <el-input type="textarea" v-model="editForm.description"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <mavon-editor v-model="editForm.content"/>
                </el-form-item>
                <el-form-item>
                    文章配图
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8181/uploadimg"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('editForm')" v-show="add">发布</el-button>
                    <el-button type="warning" @click="editPost('editForm')" v-show="edit">更改发布</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                imageUrl:'',
                typeOptions:[],
                tagOptions:[],
                edit:false,
                add:true,
                editForm: {
                    id:'',
                    title: '',
                    author:'',
                    tag:[],
                    type:[],
                    isreprint:'',
                    description: '',
                    content: '',
                    image: '',
                },
                rules: {
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'},
                        {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
                    ],
                    author: [
                        {required: true, message: '请输入作者', trigger: 'blur'},

                    ],
                    description: [
                        {required: true, message: '请输入摘要', trigger: 'blur'}
                    ],
                    tag: [
                        { required: true, message: '请选择标签', trigger: 'change' },

                    ],
                    type: [
                        { required: true, message: '请选择分类', trigger: 'change' },

                    ],
                }
            }
        },
        created() {
            const articleId = this.$route.query.id
            const _this = this
            if(articleId) {
                this.axios.get('http://localhost:8181/article/findarticlebyid/' + articleId).then((res) => {
                    const article = res.data.data
                    _this.editForm.id = article.id
                    _this.editForm.title = article.title
                    _this.editForm.author = article.author
                    _this.editForm.isreprint = article.isreprint
                    _this.editForm.type = article.type
                    _this.editForm.tag = article.tag
                    _this.editForm.description = article.description
                    _this.editForm.content = article.content
                    _this.add = false
                    _this.edit = true
                });

            }
            axios.get("http://localhost:8181/article/listType").then(function (resp) {
                _this.typeOptions = resp.data.data;
            });
            axios.get("http://localhost:8181/article/listTag").then(function (resp) {
                _this.tagOptions = resp.data.data;
            });
        },
        methods: {
            submitForm(formName) {
                const _this = this
                console.log(this.editForm)
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post("http://localhost:8181/article/addArticle",this.editForm).then(function (resp) {
                            if (resp.data.msg =='添加成功'){
                                _this.$message({
                                    message: '添加成功！',
                                    type: 'success'
                                });
                                this.$router.push({
                                    path: '/listarticle',

                                })

                            }else {
                                _this.$message({
                                    message: '添加失败！',
                                    type: 'warning'
                                });
                            }

                        });

                    } else {

                        return false;
                    }
                });
            },
            editPost(formName) {
                const _this = this
                console.log(this.editForm)
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.put("http://localhost:8181/article/editArticle",this.editForm).then(function (resp) {
                            if (resp.data.msg =='success'){
                                _this.$message({
                                    message: '更改上传成功！',
                                    type: 'success'
                                });
                                window.location.reload()

                            }else {
                                _this.$message({
                                    message: '添加失败！',
                                    type: 'warning'
                                });
                            }

                        });

                    } else {

                        return false;
                    }
                });
            },
            handleAvatarSuccess(res, file) {
                const _this = this
                this.imageUrl = URL.createObjectURL(file.raw);
                _this.editForm.image = res.data
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }

        },

    }
</script>

<style scoped>
    .m-container{
        width: 80%;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 400px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 400px;
        height: 178px;
        display: block;
    }
</style>